<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/public.js"></script>
	<script src="../../js/dream-msg.min.js" type="text/javascript" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="../../css/public.css">
	<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2896317_donuzq8ujgp.css">
</head>

<body class="bg">

	<div class="regist-box  animated fadeInDown">
		<div class="header-content">
			<span class="title-left">以学生的身份注册</span>
			<span class="title-right">已有账号，去 <a href="../../index.html">登录</a></span>
		</div>
		<div class="maincontent">
			<div class="text-flex">
				<div class="email-text" id="email">
					邮箱注册
					<p class="email-line-email"></p>
				</div>
				<div class="ml"></div>
			</div>
			<div class="ipt" id="name-show-hide">
				<input type="text" autocomplete="off" id="username" name="" maxlength="20" class="em-ipt" value=""
					required="required" placeholder="用户名称" />
			</div>

			<div style="display: flex;width: 60.2%;" id="phone-show-hide">
				<div class="ph-tips to-right">+86</div>
				<div class="tips-ipt to-left" id="" style="padding-left: 2px;">
					<input type="tel" autocomplete="off" name="" maxlength="20" id="phoneipt" class="em-ipt" value=""
						required="required" placeholder="请输入手机号码" />
				</div>
			</div>

			<div class="ipt" id="em-show-hide">
				<input type="email" autocomplete="off" id="emailbox" name="" maxlength="20" class="em-ipt" value=""
					required="required" placeholder="电子邮箱" />
			</div>

			<!-- 手机验证码输入框 -->
			<div style="display: flex;width: 60.2%;" id="yzm-show-hide">
				<div class="tips-ipt to-right">
					<input type="text" autocomplete="off" name="" id="yzm" maxlength="20" class="em-ipt" value=""
						required="required" placeholder="验证码" />
				</div>
				<div class="ph-tips else to-left" id="send" style="padding-left: 2px;">发送</div>
				<div class="ph-tips else to-left" id="second" style="padding-left: 2px;"></div>
			</div>
			<!-- 手机验证码输入框 -->

			<div class="ipt" id="creative-show-hide">
				<input type="password" autocomplete="off" name="" maxlength="20" id="pwd" class="em-ipt" value=""
					required="required" placeholder="创建密码" />
			</div>

			<!-- 邀请码 -->
			<div class="ipt" id="creative-show-hide">
				<input type="text" autocomplete="off" name="" maxlength="20" id="invite" class="em-ipt" value=""
					placeholder="邀请码" />
			</div>
			<!-- 邀请码 -->


			<div class="rember-me">
				<input type="checkbox" name="" id="" value="" class="check-box" /> <span
					class="check-box-tips">记住我</span>
			</div>

			<div class="btn-submit" id="email-submit"><span>注册</span></div>
		</div>

		<div class="footer">
			<span class="p-stu">By clicking Continue with or Sign up, you agree to Preply's <a href=""
					style="color: rgba(59, 179, 189, 1);">Terms of Service</a> and <a href=""
					style="color: rgba(59, 179, 189, 1);">Privacy Policy</a>
		</div>

		<div class="buchong">
			<div class="pos">
				<img src="../../static/anquan.png" class="img-anquan">
				<div style="margin-left: 8%;">
					<span class="txt-color"> NO SPAM</span>
					<p class="txt-color" style="margin-top: 40px;"> GUARANTEE</p>
				</div>
			</div>
			<div class="fs-txt">
				<p>
					我们不会向您发垃圾邮件。
				</p>
				<p>
					我们也尊重您的隐私。
				</p>
			</div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript">
	// 页头生成
	// productheader('body',3);

	$(function () {

		if (localStorage.getItem('iv')) {

			$('#invite').val(localStorage.getItem('iv'))
		}
	})



	$(".check-box").prop('checked', true);

	$(document).ready(function () {

		$('#second').hide();
		// 默认隐藏手机号码输入框
		$('#phone-show-hide').hide();
		// 先默认显示
		let ph = $('#phone');
		let email = $('#email');
		$('.email-line-email').show();
		$('.email-line-phone').hide();
		$('#phone').click(function () {
			// 显示
			ph.removeClass('phone-text');
			ph.addClass('email-text');
			$('.email-line-phone').show();

			// 输入框切换显示
			$('#phone-show-hide').show();
			$('#yzm-show-hide').show();
			// 隐藏	
			email.removeClass('email-text');
			email.addClass('phone-text');
			$('.email-line-email').hide();
			$('#em-show-hide').hide();
			$('#sendemail-show-hide').hide();

		})
		$('#email').click(function () {
			// 隐藏
			email.removeClass('phone-text');
			email.addClass('email-text');
			$('.email-line-email').show();
			$('#phone-show-hide').hide();

			// 显示
			ph.removeClass('email-text');
			ph.addClass('phone-text');
			$('.email-line-phone').hide();
			$('#yzm-show-hide').show();
			// 输入框切换显示
			$('#em-show-hide').show();
		})
	});

	// 验证码
	let ph = $('#phone');
	let em = $('#email');
	var second = 60;
	localStorage.setItem('time', second);
	$('#send').click(async function () {
		//手机验证码
		if (ph.hasClass('email-text')) {
			let phone = $('#phoneipt').val();
			if (phonetest(phone)) {
				Dreamer.success("发送中,请稍后", 2000);
				// 执行秒数
				$('#second').html(localStorage.getItem('time'));
				$('#send').hide();
				$('#second').show();
				let ting = setInterval(() => {
					if (localStorage.getItem('time') < 1) {
						clearInterval(ting)
						$('#send').show();
						$('#second').hide();
						second = 60;
						localStorage.removeItem('time');
						localStorage.setItem('time', second);
					} else {
						second--;
						localStorage.setItem('time', second);
						$('#second').html(localStorage.getItem('time') + 's');
					}
				}, 1000)
				let res = await ajax('verification_code', { 'phone': phone }, 'get');
			} else {
				Dreamer.error("手机号码格式错误", 2000);
			}
		} else {
			//邮箱验证码
			let emailbox = $('#emailbox').val();
			if (emailtest(emailbox)) {
				Dreamer.success("发送中,请稍后", 2000);
				// 执行倒计时
				$('#second').html(localStorage.getItem('time'));
				$('#send').hide();
				$('#second').show();
				let ting = setInterval(() => {
					if (localStorage.getItem('time') < 1) {
						clearInterval(ting)
						$('#send').show();
						$('#second').hide();
						second = 60;
						localStorage.removeItem('time');
						localStorage.setItem('time', second);
					} else {
						second--;
						localStorage.setItem('time', second);
						$('#second').html(localStorage.getItem('time') + 's');
					}
				}, 1000)
				let res = await ajax('sendEmail', { 'email': emailbox }, 'get');

			} else {
				Dreamer.error("邮箱输入错误", 2000);
			}
		}
	})
	// 验证码


	async function sendRegist() {

		let params;
		let pwd = $('#pwd').val();
		let yzm = $('#yzm').val();
		let phone = $('#phoneipt').val();
		let username = $('#username').val();
		let emailbox = $('#emailbox').val();
		let myDate = new Date();

		let times = `${myDate.getFullYear()}-${myDate.getMonth() + 1}-${myDate.getDate()} ${myDate.getHours()}:${myDate.getMinutes()}:${myDate.getSeconds()}`;
		if (!username) {
			Dreamer.error("请正确填写名称", 2000);
		} else if (emailtest(emailbox) == false) {
			Dreamer.error("请正确输入邮箱", 2000);
		} else if (!pwd && pwd.length < 6) {
			Dreamer.error("请正确填写密码,至少填写6位", 2000);
		} else if (yzm.length < 4) {
			Dreamer.error("验证码至少填写4位", 2000);
		} else {

			if ($('#invite').val()) {

				params = {

					'user_name': username,
					'mailbox': emailbox,
					'password': pwd,
					'create_time': times,
					'phone': "",
					'yzm': Number(yzm),
					'state': 0,
					'invitationcode': $('#invite').val(),

				}

			} else {

				params = {
					'user_name': username,
					'mailbox': emailbox,
					'password': pwd,
					'create_time': times,
					'phone': "",
					'yzm': Number(yzm),
					'state': 0,
				}

			}


			let res = await ajax('mailbox_registration', params, 'post');

			if (res && res.code == 200) {
				Dreamer.info("注册成功", 2000);
				if ($(".check-box").prop('checked')) {

					let temp = { 'mailbox': emailbox, 'password': pwd };
					localStorage.removeItem('params');
					localStorage.setItem('params', JSON.stringify(temp));
					window.location.href = '/views/situation/situation.html'
				} else {

					localStorage.removeItem('params');

				}

			} else {

				Dreamer.error("注册失败或者已经注册过了或者邀请码错误", 2000);

			}

		}
	}


	// 注册
	$('#email-submit').click(function () {

		throttle(sendRegist, 1500)

	})

</script>
<style type="text/css">
	.title-left {
		color: rgba(0, 0, 0, 1);
		font-size: 20px;
		font-weight: normal;
		padding-left: 8%;
	}

	.title-right {
		color: rgba(166, 166, 166, 1);
		font-size: 12px;
		position: absolute;
		right: 5%;
		bottom: 20%;
	}

	.title-right a {
		color: rgba(59, 179, 189, 1);
	}

	.header-content {
		width: 100%;
		position: relative;
		padding: 24px 0 12px 0;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}

	.btn-submit {
		color: #fff;
		width: 60%;
		height: 30px;
		border: 1px solid #fff;
		background-color: rgba(59, 179, 189, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		padding: 10px 0;
		margin-top: 20px;
		cursor: pointer;

	}

	.bg {
		background-color: rgba(237, 239, 240, 1);
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.regist-box {
		margin: auto;
		min-width: 40%;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 6px;
		margin-top: 2%;
		box-shadow: 0px 0px 10px 1px #BDBDBD;



	}

	.maincontent {
		width: 100%;
		height: auto;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.maincontent>.regist-title {
		font-size: 28px;
		color: rgba(99, 97, 97, 1);
		font-weight: bold;
		white-space: nowrap;
		padding-bottom: 5%;
	}

	.title-tips {
		margin-top: 3%;
		white-space: nowrap;
		color: rgba(128, 128, 128, 1);
		font-size: 22px;

	}

	.text-flex {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
	}

	.email-text {
		width: 100%;
		text-align: center;
		color: rgba(0, 0, 0, 1);
		font-size: 24px;
		font-weight: normal;
		justify-content: center;
		cursor: pointer;
	}

	.email-line-email {
		width: 60%;
		height: 2px;
		background-color: rgba(42, 130, 228, 1);
		border-radius: 6px;
		margin: auto;
		margin-top: 6px;
	}

	.email-line-phone {
		width: 60%;
		height: 2px;
		background-color: rgba(42, 130, 228, 1);
		border-radius: 6px;
		margin: auto;
		margin-top: 6px;
	}

	.text-flex>.phone-text {
		color: rgba(166, 166, 166, 1);
		font-size: 14px;
		cursor: pointer;
	}

	.ml {
		margin-left: 15%;
	}

	.ipt {
		display: flex;
		border: 1px solid #d6d6d6;
		width: 60%;
		margin-top: 20px;
		padding: 4px 0px;
		border-radius: 4px;
	}

	.rember-me {
		width: 60%;
		margin-top: 20px;
		display: flex;
		align-items: center;
	}

	.check-box {
		width: 20px;
		height: 16px;
		border-radius: 4px;
		border: 1px solid #aab2bd;
		;
	}

	.check-box-tips {
		color: #000000;
		font-size: 12px;
		margin-left: 3%;
	}

	.tips-ipt {
		display: flex;
		border: 1px solid #d6d6d6;
		width: 80%;
		margin-top: 20px;
		padding: 4px 0px;
		border-radius: 4px;

	}

	.ph-tips {
		width: 20%;
		border-right: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		display: flex;
		border: 1px solid #d6d6d6;
		margin-top: 20px;
		padding: 4px 8px;
		border-radius: 4px;

	}

	.to-left {
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}

	.to-right {
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}

	.else {
		background-color: rgba(59, 179, 189, 1);
		color: white;
		border-color: rgba(59, 179, 189, 1);
		cursor: pointer;
		border-right: 1px solid #fff;

	}

	.em-ipt {
		margin-left: 8px;
		display: flex;
		width: 100%;
		height: 30px;
		outline: none;
		border: none;
	}

	input::-webkit-input-placeholder {
		/* placeholder颜色  */
		color: #aab2bd;
		/* placeholder字体大小  */
		font-size: 18px;
		margin-left: 8px;
	}

	.phone-header {
		background-color: #363542;
		display: flex;
		height: 100%;
		border-right: 1px solid rgba(229, 229, 229, 1);
		color: rgba(0, 0, 0, 1);
		font-size: 18px;

	}

	.footer {
		width: 100%;
		text-align: center;
		margin-top: 10%;
		font-size: 14px;
		padding-bottom: 40px;
	}

	.fs-txt {
		color: #969595;
		font-size: 14px;
		margin: auto;
	}

	.txt-color {
		color: #00BAAD;
		font-size: 12px;
	}

	.img-anquan {
		width: 58px;
		height: 58px;
	}

	.buchong {
		width: 100%;
		background-color: #D6D2D2;
		padding: 4% 0 6% 0;
		display: flex;
		position: relative;
	}

	.pos {
		position: absolute;
		left: 8%;
		display: flex;
	}
</style>